<!--
 * @Author: 曹捷
 * @Date: 2020-06-29 17:08:34
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-09-03 21:04:39
 * @Description: 问题一级展示 list集合展示以及操作
--> 
<template>
  <div>
    <div :class="[itemClass]" :key="index" class="p-l-10 qst-main-content m-b-20 p-r-10" v-for="(dataInfo,index) in dataList">
      <div @click="toQuestionDetails(dataInfo)" class="hot-title fz-title one-line">{{dataInfo.title}}</div>
      <div class="perinfo p-b-5" v-if="dataInfo.realName">
        <span class="iconfont icon-user p-r-5"></span>
        {{dataInfo.realName}}
      </div>
      <div @click="toQuestionDetails(dataInfo)" class="hot-content textarea-info content text-indent" v-html="dataInfo.content"></div>
      <div class="question-foot m-t-15">
        <div class="flex-l-r">
          <div @click="toQuestionDetails(dataInfo)" class="item flex-c">
            <span class="iconfont icon-shoucang p-r-5"></span>
            <span class="hot-info">收藏{{dataInfo.collectSize}}</span>
          </div>
          <div @click="toQuestionDetails(dataInfo)" class="item flex-c">
            <span class="iconfont icon-msg p-r-5"></span>
            <span class="hot-info">评论{{dataInfo.commentSize}}</span>
          </div>
          <div :class="{'color-active':dataInfo.isGood ===1}" @click="toGood(dataInfo)" class="item">
            <span class="iconfont icon-good p-r-5"></span>
            <span class="hot-info">赞{{dataInfo.admireSize}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
    },
    itemClass: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      visable: false,
    }
  },
  methods: {
    toGood(item) {
      item.isGood = item.isGood === 1 ? 0 : 1
      item.goodNum += item.isGood === 1 ? 1 : -1
    },
    // 收藏到具体文件夹
    collectInfo(item) {
      uni.showToast({
        title: '收藏成功',
        icon: 'none',
      })
      this.visable = false
    },
    toQuestionDetails(item) {
      this.$app.goto(
        '/pages/question/quesDetails/quesDetails',
        Object.assign({ type: 2 }, item)
      )
    },
  },
}
</script>

<style lang="scss">
.qst-main-content {
  .hot-title {
    height: 80rpx;
    line-height: 80rpx;
  }
  .perinfo {
    color: #96a0af;
  }
  .question-foot {
    height: 80rpx;
    line-height: 80rpx;
    margin-left: -30rpx;
    border-top: 1rpx solid #e1e1e1;
    .item {
      text-align: center;
      width: 33%;
      color: #96a0af;
      font-size: 24rpx;
      border-right: 1rpx solid #e1e1e1;
      .obit-zlbtn {
        width: 55px;
        margin: 0 auto;
      }
    }
    .item:last-child {
      border-right: none;
    }
  }
  .hot-content {
    color: #717582;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
</style>